<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>06_列表渲染</title>
  </head>
  <body>
    <!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

    <div id="demo">
      <h2>测试: v-for 遍历数组</h2>

      <ul>
        <li v-for="item in persons" :key="item.id">
          {{item.name}} : {{item.age}}
        </li>
      </ul>

      <h2>测试: v-for 遍历对象</h2>
      <ul>
        <li v-for="value,key in person" :key="key">{{key}} : {{value}}</li>
      </ul>

      <ul>
        <li v-for="item,index in str" :key="index">{{item}}</li>
      </ul>

      <ul>
        <li v-for="item,index in num" :key="index">{{item}}</li>
      </ul>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#demo",
        data: {
          persons: [
            { id: 1, name: "海静", age: 33 },
            { id: 2, name: "老陶", age: 44 },
            { id: 3, name: "老罗", age: 55 },
            { id: 4, name: "书文", age: 22 },
          ],
          person: {
            name: "jack",
            age: 20,
          },
          str: "hello Jiajia",
          num: 22,
        },
      });
    </script>
  </body>
</html>
